<template>
    <div class="wai">
        <div class="goods-list">
            <div class="goods-item" v-for="item in goods_list" :key='item.goods_id'>
                <router-link class="link_a" :to="{ name: 'goodsinfo', params: { id: item.goods_id } }">
                    <img class="picture" :src="$http.defaults.baseURL + item.cover_img_path.slice(1)" alt="图片">
                    <h1 class="title">{{ item.name }}</h1>
                    <p class="info">
                        <span class="price">￥{{ item.price }}</span>
                        <span class="sell">剩余{{ item.count }}件</span>
                    </p>
                </router-link>
            </div>
        </div>
        <button class="more" v-if="getGoodsList.length == 0" size='Large' @click="getMore">加载更多</button>
    </div>
</template>
                      
<script>
export default {
    name: 'shopping_page',
    data() {
        return {
            msg: 'shopping组件',
            goods_list: [],
            goods_id: 0,
            last_id: 0
        }
    },
    mounted() {

    },
    created() {
        this.getGoodsList();
    },
    methods: {
        getGoodsList() {
            this.$http.get("goods_list.php", {
                params: {
                    'goods_id': this.goods_id
                }
            }).then(res => {

                if (res.data.status === 1) {
                    this.goods_list = this.goods_list.concat(res.data.data);
                    // console.log(res.data);
                    this.last_id = res.data.data[res.data.data.length - 1].goods_id;

                } else {
                    alert('商品列表为空');
                }
                console.log(this.goods_list);

            }).catch(() => {
                console.log('失败');
                alert('已经到底底部')
            });
        },
        getMore() {
            this.goods_id = this.last_id;
            this.getGoodsList();
            console.log(this.goods_id);
        }
    }
}
</script>
                                                              
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.wai {
    // padding-bottom: 90%;
    background: #e1dcdc;
    height: 895px;
    overflow-y: scroll;
}

.good-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10;

}

.goods-item {
    display: inline-block;
    width: 310px;
    height: 230px;
    padding: 4px;
    margin: 2px;
    background: #ffffff;
    // border: 1px solid red;

}

.picture {
    width: 100%;
    height: 80%;
    border-radius: 10px;
}

.title {
    font-size: 18px;
    color: #333;
    margin: 10 0;
}

.info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

.price {
    color: red;
    font-weight: bold;
    font-size: 16px;
}

.sell {
    font-size: 13px;
}

.more {
    width: 100%;
    // margin-top: 5%;
}
</style>
                                                                        